<template>
	<rootWithStateBarLayout :rightToolBarData="toolDataList">
		<view slot="pageContent" class="content-lay">
			<view class="header flex-h">
				<!-- 				<view class="flex-h" style="align-items: center; text-align: center;">
 -->
				<image @click="navigateBack" class="back-image" src="/static/imgs/tools/icon_nav_back_dark@2x.png">
				</image>
				<text class="header-person">{{$t('login.loginSetting.title')}}</text>
				<!-- </view> -->
			</view>

			<view class="setting_content flex-h">
				<view class="left_tab_lay flex-v">
					<view :class="'tab_item flex-h ' + (segmentCurrent == item.index ? 'selected' : '') "
						v-for="(item,index) in segmentItems" :key="item.title" @click="onSegmentClickItem(item.index)">
						<image class="tab_icon" :src="item.icon"></image>
						<view class="tab_title">{{item.title}}</view>
					</view>
				</view>

				<view v-if="segmentCurrent == 0 || segmentCurrent == 1" class="right_content_lay flex-v">
					<view class="title_lay">
						<view class="title">{{segmentItems[segmentCurrent].title}}</view>
						<view class="title_left_lay">
							<view class="title_item" style="color: #1890FF;" @click="onAddClick">{{$t("public.add")}}
							</view>
						</view>
						<view class="title_right_lay flex-h">
							<view class="title_item" @click="onEditClick">{{$t("public.edit")}}</view>
							<view class="title_item" @click="onRemoveClick">{{$t("public.remove")}}</view>
						</view>
					</view>

					<view class="segment-content">
						<vTable class="data-table" ref="table" :columns="tableHeadData" :list="tableContentData"
							:height="tableHeight" selection="single" :td-height="40" :th-td-height="40"
							border-color="#ff0000"
							@on-selection-change="onTableSelect" 
							:slot-cols="['index','this_thck','txt_value', 'ordr']">
								<template v-slot="{ row ,rowKey }">
									<view :style="'font-size:14rpx;' + (rowKey == 'index' ? 'color:#000;' : 'color:#666666;'  ) ">{{row[rowKey]}}</view>
								</template>
							</vTable>



						<!-- 							<vTable class="data-table" ref="table" :columns="tableHeadData" :list="tableContentData"
								selection="single" @on-selection-change="onTableSelect" :height="tableHeight" :td-height="40"
								:th-td-height="40" border-color="#00ff00"></vTable> -->
					</view>
				</view>
			</view>

			<!-- 			<view class="flex-v" style="padding: 0px 10px;">
				<uni-segmented-control :current="segmentCurrent" :values="segmentItems" @clickItem="onSegmentClickItem"
					styleType="text" activeColor="#0062B0"></uni-segmented-control>
				<view style="width: 100%; height: 1px; background-color: #0062B0;"></view>
			</view>

			<view class="segments">
				<view class="segment-content">
					<vTable class="data-table" ref="table" :columns="tableHeadData" :list="tableContentData"
						:height="tableHeight" selection="single" @on-selection-change="onTableSelect"></vTable>
				</view>

				<view class="btn-content flex-h" style="align-items: center; justify-content: space-around;">
					<button class="btn" @click="onAddClick">{{$t("public.add")}}</button>
					<button class="btn" @click="onEditClick">{{$t("public.edit")}}</button>
					<button class="btn" @click="onRemoveClick">{{$t("public.remove")}}</button>
				</view>
			</view> -->
		</view>
		<view slot="popupContent">
			<uni-popup id="popup" ref="popup" type="center" :animation="true">
				<view class="popup-content flex-v">
					<view v-if="false" class="pop-head">
						<text class="head-title">{{genPopupTitle}}</text>
					</view>
					<view class="pop-content flex-v">
						<view class="pop-line flex-h">
							<view class="line-title">
								{{segmentCurrent == 0 ? $t("login.loginSetting.tableHeadTypeAccount") : $t("login.loginSetting.tableHeadTypeNo")}}
							</view>
							<input class="line-input" :value="popupData ? popupData.txt_value : ''" @input="onNameInput"
								type="text"></input>
						</view>
						<view class="pop-line flex-h">
							<view class="line-title">{{$t("login.loginSetting.tableHeadTypeOrder")}}</view>
							<input class="line-input" :value="popupData ? popupData.ordr : ''" @input="onNoInput"
								type="number"></input>
						</view>
						
						<view class="pop-line flex-h">
							<view style="background: #F8F8F8;padding: 14rpx; color: red;">
								{{$t("login.loginSetting.tablePopupTip")}}
							</view>
						</view>
					</view>
					<view style="width: 100%; height: 2px; background-color: #F8F8F8;"></view>
					<view class="pop-line flex-h" style="padding: 0rpx 30rpx;margin-bottom: 0rpx;align-items: center; justify-content: space-around;">
						<view class="btn-ok" @click="onConfirmClick">{{$t("public.confirm")}}</view>
						<view style="height: 44rpx; width: 2px; background-color: #F8F8F8;"></view>
						<view class="btn-cancel" @click="onCancelClick">{{$t("public.cancel")}}</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</rootWithStateBarLayout>
</template>

<script>
	import vTable from "@/components/table.vue";
	import rootWithStateBarLayout from "@/_components/rootWithStateBarLayout.vue";
	import tempLoginData from "@/common/login_data.js";
	import {
		requireAllLoginNoData,
		requireAllLoginAccountData,
		createLoginAccount,
		updateLoginAccount,
		deleteLoginAccount
	} from "@/localService/loginService.js";

	export default {
		components: {
			vTable,
			rootWithStateBarLayout,
		},

		data() {
			let _self = this;
			return {
				toolDataList: [],
				segmentCurrent: 0,
				segmentItems: [{
					index: 0,
					title: _self.$t("login.loginSetting.segmentAccount"),
					icon: "/static/imgs/login/login_setting/icon_number_dark@2x.png"
				}, {
					index: 1,
					title: _self.$t("login.loginSetting.segmentNo"),
					icon: "/static/imgs/login/login_setting/icon_number_dark@2x.png"
				}],

				tableContentData: [{},{},{},{},{}],
				checkerList: [{},{},{}],
				checkNoList: [{}],
				selectTableData: null,

				tableHeight: 400,
				tableHeadData: [
					{
						key: "index",
						title: _self.$t("login.loginSetting.tableHeadIndex"),
						$width: "100rpx"
					},
					{
						key: "txt_value",
						title: _self.$t("login.loginSetting.tableHeadTypeAccount"),
						$width: "500rpx"
					},
					{
						key: "ordr",
						title: _self.$t("login.loginSetting.tableHeadTypeOrder"),
						$width: "100rpx"
					}
				],

				popupType: "edit", // create
				popupData: null,
			};
		},

		computed: {
			genPopupTitle() {
				let re = '';
				if (this.segmentCurrent == 0) {
					if (this.popupType == "edit")
						re = this.$t("login.loginSetting.editAccountTitle")
					else
						re = this.$t("login.loginSetting.addAccountTitle")
				} else if (this.segmentCurrent == 1) {
					if (this.popupType == "edit")
						re = this.$t("login.loginSetting.editNoTitle")
					else
						re = this.$t("login.loginSetting.addNoTitle")
				}
				return re;
			}
		},

		watch: {
			tableContentData(v) {
				console.log("tableContentData   -----   watch")
				console.log(v)
			}
		},

		onReady() {
			this.requireAllLoginAccountDataApi();
			this.requireAllLoginNoDataApi();
			this.tableContentData = this.checkerList;
			// this.onAddClick();
		},

		methods: {
			navigateBack() {
				uni.navigateBack();
			},

			onSegmentClickItem(e) {
				this.segmentCurrent = e;
				if (e == 0) {
					this.tableContentData = this.checkerList;
				} else {
					this.tableContentData = this.checkNoList;
				}
			},

			requireAllLoginAccountDataApi() {
				let _self = this;
				requireAllLoginAccountData().then(e => {
					console.log("requireAllLoginAccountDataApi")
					console.log(e)
					let tempIndex = 1;
					e.forEach(subE => {
						subE.index = tempIndex++;
					})
					_self.checkerList = e;
					if (_self.segmentCurrent == 0)
						_self.tableContentData = e;
				})
			},

			requireAllLoginNoDataApi() {
				let _self = this;
				requireAllLoginNoData().then(e => {
					console.log("requireAllLoginNoDataApi")
					console.log(e)
					let tempIndex = 1;
					e.forEach(subE => {
						subE.index = tempIndex++;
					})
					_self.checkNoList = e;
					if (_self.segmentCurrent == 1)
						_self.tableContentData = e;
				})
			},

			createLoginAccountApi(inObj) {
				let _self = this;
				createLoginAccount(inObj).then(e => {
					console.log("createLoginAccount")
					_self.requireAllLoginAccountDataApi();
					_self.requireAllLoginNoDataApi();
				})
			},

			updateLoginAccountApi(inId, inObj) {
				let _self = this;
				updateLoginAccount(inId, inObj).then(e => {
					console.log("updateLoginAccountApi")
					_self.requireAllLoginAccountDataApi();
					_self.requireAllLoginNoDataApi();
				})
			},

			deleteLoginAccountApi(inId) {
				let _self = this;
				deleteLoginAccount(inId).then(e => {
					console.log("deleteLoginAccountApi")
					_self.requireAllLoginAccountDataApi();
					_self.requireAllLoginNoDataApi();
				})
			},

			onTableSelect(e) {
				console.log("onTableSelect")
				this.selectTableData = e.new.item;
				console.log(JSON.stringify(this.selectTableData))
			},

			onAddClick() {
				this.popupData = {};
				this.popupType = "create";
				this.$refs.popup.open();
			},

			onEditClick() {
				let _self = this;
				if (!this.selectTableData) {
					uni.showToast({
						title: _self.$t("warnning.singleSelect"),
						icon: "none"
					})
					return;
				}
				this.popupType = "edit";
				this.popupData = this.selectTableData;
				this.$refs.popup.open();
			},

			onRemoveClick() {
				let _self = this;
				if (!this.selectTableData) {
					uni.showToast({
						title: _self.$t("warnning.singleSelect"),
						icon: "none"
					})
					return;
				}

				this.deleteLoginAccountApi(this.selectTableData.id);
			},

			onConfirmClick() {
				let _self = this;
				if (!this.popupData.txt_value || this.popupData.txt_value.length <= 0) {
					uni.showToast({
						title: _self.$t("warnning.nameInputError")
					})
					return;
				}

				if (!this.popupData.ordr || this.popupData.ordr <= 0) {
					uni.showToast({
						title: _self.$t("warnning.orderInputError")
					})
					return;
				}

				if (this.popupType == "edit")
					this.updateLoginAccountApi(this.popupData.id, this.popupData);
				else if (this.popupType == "create") {
					this.popupData.cls = this.segmentCurrent + 1;
					this.createLoginAccountApi(this.popupData);
				}
				this.$refs.popup.close();
			},

			onCancelClick() {
				this.$refs.popup.close();
			},

			onNameInput(e) {
				this.popupData.txt_value = e.detail.value;
			},

			onNoInput(e) {
				this.popupData.ordr = e.detail.value;
			},
		}
	}
</script>

<style scoped lang="scss">
	.content-lay {
		position: relative;
		box-sizing: border-box;
		background: #F6F6F6;
		width: 100%;
		height: 100%;

		display: flex;
		flex-direction: column;
	}

	.header {
		// background-color: #0062B0;
		position: relative;
		padding: 0rpx 9rpx;
		height: 44rpx;
		align-items: center;
		text-align: center;
		background-color: #fff;
		// justify-content: space-between;

		.back-image {
			width: 17upx;
			height: 17upx;
			margin-right: 5upx;
		}

		.header-person {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			font-size: 18upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1F2329;
		}
	}

	.setting_content {
		position: relative;
		box-sizing: border-box;
		width: calc(100% - 20rpx);
		height: 100%;
		background-color: #fff;
		margin: 10rpx;
		color: #000;

		.left_tab_lay {
			position: relative;
			width: calc(40%);
			height: 100%;
			box-sizing: border-box;
			padding: 16rpx;
			border-right: 1px solid #E7E7E7;
			// background-color: #007AFF;

			.tab_item {
				position: relative;
				width: calc(100%);
				align-items: center;
				box-sizing: border-box;
				padding-left: 12rpx;
				// border-bottom: 1px solid #0f0f0f;

				.tab_icon {
					width: 18rpx;
					height: 18rpx;
				}

				.tab_title {
					z-index: 0;
					line-height: 42rpx;
					width: 100%;
					margin-left: 12rpx;
					font-size: 14rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					border-bottom: 1px solid #E7E7E7;
				}
			}

			.selected {
				background-color: #0062B0;
				color: #ffffff;
			}

		}

		.right_content_lay {
			position: relative;
			width: calc(60%);
			height: 100%;
			box-sizing: border-box;
			padding: 16rpx;


			.title_lay {
				position: relative;
				width: 100%;

				.title {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);

					font-size: 15rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 21px;
				}

				.title_left_lay {
					width: 10%;
					position: absolute;
					left: 0rpx;
					// transform: translateX(-50%);
					align-items: center;
				}

				.title_right_lay {
					position: absolute;
					right: 0rpx;
					// transform: translateX(-50%);					
					align-items: center;
				}

				.title_item {
					font-size: 14rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 20rpx;
					padding: 0 5rpx;
				}
			}

			.segment-content {
				position: relative;
				width: 100%;
				margin-top: 30rpx;

				.data-table {
					width: calc(100%);
					height: 100%;
				}
			}

		}
	}



	.btn-content {
		.btn {
			// padding: 10px 20px;
			// background-color: #f0f0f0;
			// color: #000;
		}
	}

	.popup-content {
		align-items: center;
		width: 320rpx;
		// height: 236rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 24px 0px rgba(0,0,0,0.16);
		border-radius: 12rpx;
		box-sizing: border-box;
		

		.pop-head {
			width: 100%;
			text-align: center;

			.head-title {
				font-size: 20px;
				color: #0062b0;
			}
		}

		.pop-content {
			width: 100%;
			box-sizing: border-box;
			padding: 16rpx;
			align-items: center;
		}

		.pop-line {
			width: 100%;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			margin-bottom: 12rpx;

			.line-title {
				width: 25%;
				font-size: 14rpx;
			}

			.line-input {
				width: 75%;
				font-size: 14rpx;
				padding: 10rpx;
				border-radius: 1px;
				border: 1px solid #CFD3D5;
			}
		}
	}
</style>
